<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="index.css">
    <script type="text/javascript" src="flexible.min.js">
    </script>
    <title>主页</title>
</head>
<style>
    /* 初始化 */
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        text-decoration: none;
        color: #fff;

    }

    li {}

    ul {
        list-style: none;
    }

    .clearfix {
        display: flex;
    }

    .clearfix:after,
    .clearfix:before {
        content: "";
        display: block;
        clear: both
    }


    /* body背景，规定字体 */
    body {
        background: url('./img/beijing.png') no-repeat;
        background-size: cover;
        color: #0f5000;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
    }

    /* 头部区域 */
    .indexTop {
        width: 100%;
        height: 50px;
    }

    .indexTop>img {
        width: 100%;
    }

    /* 主体 */
    .container {
        width: 65%;
        height: 70%;
        position: relative;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        padding: 5px
    }

    .container li {
        width: 15%;
        text-align: center;
        float: left;
        margin: 5px;
        padding: 10px;
        position: relative;
        flex: 1;

    }

    .imgbox {
        width: 100%;
        height: 100%
    }

    .imgbox img {
        width: 70%;
        height: 70%;
    }

    .container li .imgbox,
    .container li .text {
        margin-top: 20px;
    }

    .text {}
</style>

<body>
    <!-- 头部 -->
    <div class="indexTop">
        <img src="./img/top01.png" alt="">
    </div>
    <!-- 主体 -->
    <div class="container">
        <ul class="clearfix">
            <li onclick="startUp(0)">
                <a href="#">
                    <div>
                        <div class="imgbox"><img src="./img/tubiao0010.png" alt=""></div>
                        <div class="text">销售报表</div>
                    </div>
                </a>
            </li>
            <li onclick="startUp(1)">
                <a href="#">
                    <div>
                        <div class="imgbox"><img src="./img/tubiao0001.png" alt=""></div>
                        <div class="text">工厂环境</div>
                    </div>
                </a>
            </li>
            <li onclick="startUp(2)">
                <a href="#">
                    <div>
                        <div class="imgbox"><img src="./img/tubiao0004.png" alt=""></div>
                        <div class="text">生产监控及修复</div>
                    </div>
                </a>
            </li>

            <li onclick="startUp(3)">
                <a href="#">
                    <div>
                        <div class="imgbox"><img src="./img/tubiao0003.png" alt=""></div>
                        <div class="text">智能采购</div>
                    </div>
                </a>
            </li>
        </ul>
        <ul class="clearfix">
            <li onclick="startUp(4)">
                <a href="#">
                    <div>
                        <div class="imgbox"><img src="./img/tubiao0008.png" alt=""></div>
                        <div class="text">成品车库</div>
                    </div>
                </a>
            </li>
            <li onclick="startUp(5)">
                <a href="#">
                    <div>
                        <div class="imgbox"><img src="./img/tubiao0007.png" alt=""></div>
                        <div class="text">车辆定制</div>
                    </div>
                </a>
            </li>
            <li onclick="startUp(6)">
                <a href="#">
                    <div>
                        <div class="imgbox"><img src="./img/tubiao0002.png" alt=""></div>
                        <div class="text">生产过程监控</div>
                    </div>
                </a>
            </li>
            <li onclick="startUp(7)">
                <a href="#">
                    <div>
                        <div class="imgbox"><img src="./img/tubiao0005.png" alt=""></div>
                        <div class="text">人事管理</div>
                    </div>
                </a>
            </li>
        </ul>

    </div>

    <script>

        function startUp(id) {
            if (window.nativeMethod) {
                nativeMethod.startActivity(id);
            }
        }
    </script>

</body>

</html>